<template>
  <div>
    <el-form :inline="true" :model="queryParams"  size="mini">
      <el-form-item :label="$t('name')">
        <el-input v-model="queryParams.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="requestData" icon="el-icon-search">{{ $t('search') }}</el-button>
        <el-button type="primary" v-if="addPermission"  @click="dialogAddFormVisible = true" icon="el-icon-plus">{{ $t('add') }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
            :data="tableData"
            v-loading="loading"
            border
            style="width: 100%">
      <el-table-column
              prop="name"
              :label="$t('name')">
      </el-table-column>
        <el-table-column
            prop="logo"
            :label="$t('logo')">
            <template slot-scope="scope">
                <el-image
                    style="width: 150px;"
                    :src="scope.row.logo"
                    :preview-src-list="[scope.row.logo]"></el-image>
            </template>
        </el-table-column>
        <el-table-column
            prop="legal_person"
            :label="$t('legal_person')">
        </el-table-column>
        <el-table-column
            prop="license"
            :label="$t('license')">
            <template slot-scope="scope">
                <el-image
                    style="width: 150px;"
                    :src="scope.row.license"
                    :preview-src-list="[scope.row.license]"></el-image>
            </template>
        </el-table-column>
        <el-table-column
            prop="store_pass"
            :label="$t('store_pass')">
            <template slot-scope="scope">
                <div v-if="scope.row.store_pass">已设置 <el-button v-if="setStorePassPermission" @click="setStorePassShow(scope, '修改密码')" type="text">修改</el-button></div>
                <div v-else>未设置 <el-button v-if="setStorePassPermission" @click="setStorePassShow(scope, '设置密码')" type="text">设置</el-button></div>
            </template>
        </el-table-column>
        <el-table-column
            prop="status"
            :label="$t('status')">
            <template slot-scope="scope">
                {{scope.row.status_text}}
                <div v-if="scope.row.status == 1">
                     <span style="color:red">理由:{{scope.row.opt_reason}}</span>
                </div>
            </template>
        </el-table-column>
      <el-table-column
              prop="time"
              :label="$t('createdAt') + '/' + $t('updatedAt')">
          <template slot-scope="scope">
              {{scope.row.created_at}} <br> {{scope.row.updated_at}}
          </template>
      </el-table-column>
      <el-table-column
              fixed="right"
              :label="$t('actions')"
              >
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  v-if="scope.row.status == 2 && interStorePermission"
                  @click="handleInterStoreShow(scope.$index, scope.row)">{{ $t('interStore') }}</el-button>
            <el-button
                size="mini"
                v-if="editPermission"
                @click="handleEditshow(scope.$index, scope.row)">{{ $t('edit') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="mo-page"
                   @current-change="requestData"
                   :current-page.sync="pagination.currentPage"
                   :page-size="pagination.pageSize"
                   layout="total, prev, pager, next, jumper"
                   :total="pagination.total">
    </el-pagination>

    <el-dialog :title="$t('add')" :visible.sync="dialogAddFormVisible" width="30%">
      <el-form :model="addForm" ref="addForm">
        <el-form-item :label="$t('name')" prop="name" :label-width="formLabelWidth">
            <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('logo')" prop="logo" :label-width="formLabelWidth">
            <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleUploadLogoSuccess"
            :on-error="handleUploadError">
            <img v-if="logo" :src="logo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
          <el-form-item :label="$t('legal_person')" prop="legal_person" :label-width="formLabelWidth">
              <el-input v-model="addForm.legal_person"></el-input>
          </el-form-item>
          <el-form-item :label="$t('license')" prop="license" :label-width="formLabelWidth">
              <el-upload
                  class="avatar-uploader"
                  action="/api/upload"
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="handleUploadLicenseSuccess"
                  :on-error="handleUploadError">
                  <img v-if="license" :src="license" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="handleAdd">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

      <el-dialog :title="$t('edit')" :visible.sync="dialogEditFormVisible" width="30%">
          <el-form :model="editForm" ref="addForm">
              <el-form-item :label="$t('name')" prop="name" :label-width="formLabelWidth">
                  <el-input v-model="editForm.name"></el-input>
              </el-form-item>
              <el-form-item :label="$t('logo')" prop="logo" :label-width="formLabelWidth">
                  <el-upload
                      class="avatar-uploader"
                      action="/api/upload"
                      :headers="headers"
                      :show-file-list="false"
                      :on-success="handleUploadLogoSuccess"
                      :on-error="handleUploadError">
                      <img v-if="logo" :src="logo" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              </el-form-item>
              <el-form-item :label="$t('legal_person')" prop="legal_person" :label-width="formLabelWidth">
                  <el-input v-model="editForm.legal_person"></el-input>
              </el-form-item>
              <el-form-item :label="$t('license')" prop="license" :label-width="formLabelWidth">
                  <el-upload
                      class="avatar-uploader"
                      action="/api/upload"
                      :headers="headers"
                      :show-file-list="false"
                      :on-success="handleUploadLicenseSuccess"
                      :on-error="handleUploadError">
                      <img v-if="license" :src="license" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogEditFormVisible = false">{{ $t('cancel') }}</el-button>
              <el-button type="primary" @click="handleEdit">{{ $t('confirm') }}</el-button>
          </div>
      </el-dialog>

      <el-dialog :title="setStorePassTitle" :visible.sync="dialogSetStorePassFormVisible" width="30%">
          <el-form :model="setStorePassForm" ref="setStorePassForm">
              <el-form-item :label="$t('store_pass')" prop="storePass" :label-width="formLabelWidth">
                  <el-input type="password" v-model="setStorePassForm.store_pass"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogSetStorePassFormVisible = false">{{ $t('cancel') }}</el-button>
              <el-button type="primary" @click="setStorePass">{{ $t('confirm') }}</el-button>
          </div>
      </el-dialog>

      <el-dialog :title="enterStoreFormTitle" :visible.sync="dialogEnterStoreFormVisible" width="30%">
          <el-form :model="enterStoreForm" ref="enterStoreForm">
              <el-form-item :label="$t('store_pass')" prop="storePass" :label-width="formLabelWidth">
                  <el-input type="password" v-model="enterStoreForm.store_pass"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogEnterStoreFormVisible = false">{{ $t('cancel') }}</el-button>
              <el-button type="primary" @click="handleInterStore">{{ $t('confirm') }}</el-button>
          </div>
      </el-dialog>

  </div>
</template>

<script>
import {add, edit, index, login, setStorePass} from '../../../api/stores'
import {addSuccess, editSuccess, responseDataFormat, tableDefaultData} from '../../../libs/tableDataHandle'
import {hasPermission} from '../../../libs/permission'
import notify from '../../../libs/notify'
import {queryParams} from "../../../mixins/queryParams"
import {getToken} from '../../../libs/auth'

export default {
    name: 'stores',
    mixins:[queryParams],
    data() {
      return {
        ...tableDefaultData(),
          dialogSetStorePassFormVisible:false,
          dialogEnterStoreFormVisible:false,
        addForm: {
            name: '',
            logo: '',
            legal_person: '',
            license: '',
        },
        editForm: {
            id:'',
            name: '',
            logo: '',
            legal_person: '',
            license: '',
        },
          setStorePassForm: {
            id:'',
              store_pass:'',
          },
          enterStoreForm: {
            id:'',
              store_pass:'',
          },
        logo:'',
        logoPath:'',
          license:'',
          licensePath:'',
          headers:{
            Authorization: '',
          },
          setStorePassTitle:'',
          enterStoreFormTitle:'',
      }
    },
    methods: {
        handleEditshow(index, row) {
            this.dialogEditFormVisible = true
            this.editForm = {
                id: row.id,
                name: row.name,
                legal_person: row.legal_person,
            }
            this.logo = row.logo
            this.logoPath = row.logo_path
            this.license = row.license
            this.licensePath = row.license_path
        },
        requestData() {
            this.loading = true
            index({...this.queryParams, page: this.queryPage}).then( response => {
                responseDataFormat(response, this)
            })
        },
        handleUploadLogoSuccess(response, file) {
            this.logo = response.data.src
            this.logoPath = response.data.path
        },
        handleUploadLicenseSuccess(response, file) {
            this.license = response.data.src
            this.licensePath = response.data.path
        },
        handleUploadError(err, file) {
            this.$message.error(JSON.parse(err.message).message)
        },
        handleAdd() {
            this.addForm.logo = this.logoPath
            this.addForm.license = this.licensePath
            add(this.addForm).then( response => {
                addSuccess(this)
                this.addForm = {}
                this.requestData()
            })
        },
        handleEdit() {
            this.editForm.logo = this.logoPath
            this.editForm.license = this.licensePath
            edit(this.editForm).then(response => {
                this.requestData()
                editSuccess(this)
            })
        },
        token() {
            getToken('admin').then(token => {
                this.headers.Authorization = 'Bearer ' + token.token
            })
        },
        handleInterStoreShow(index, row) {
            this.dialogEnterStoreFormVisible = true
            this.enterStoreForm.id = row.id
        },
        handleInterStore() {
            login(this.enterStoreForm).then(response => {
                notify.success(response.data.message, this)
                localStorage.setItem('store_token', response.data.data.token)
                window.location.href = '/admin/store/info'
            })
        },
        setStorePassShow(scope, title) {
            this.dialogSetStorePassFormVisible = true
            this.setStorePassForm.id = scope.row.id
            this.setStorePassTitle = title
        },
        setStorePass() {
            setStorePass(this.setStorePassForm).then(response => {
                notify.success(this.setStorePassTitle + '成功', this)
                this.setStorePassForm= {}
                this.dialogSetStorePassFormVisible = false
                this.requestData()
            })
        }
    },
    computed: {
      addPermission: function() {
        return hasPermission('store.add')
      },
        interStorePermission: function() {
            return hasPermission('inter.store')
        },
        editPermission: function() {
            return hasPermission('store.edit')
        },
        setStorePassPermission: function() {
            return hasPermission('store.setStorePass')
        },
    },
      created() {
        this.token()
      this.requestData()
    }
  }
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
}
.avatar {
    width: 150px;
    height: 150px;
    display: block;
}
</style>
